<template>
    <view>
        <div class="container" v-if="service==1">
            <div style="height: 10px"></div>
            <div>
                <div style="margin-left: 5%;font-size: 14px;">
                            <div>设备名称：{{ info.deviceName }}</div>
                            <div style="height: 10px"></div>
                            <div>购买时间：{{ info.purchaseDate }}</div>
                        </div>
            </div>
            <view class="all">
                <view class="content">
                    <div class="card" v-for="item in list">
                        <div style="height: 10px"></div>
                        <div style="margin-left: 5%;font-size: 14px;">
                            <div>保修时间：{{ item.createTime }}</div>
                            <div style="height: 10px"></div>
                            <div>保修人员：{{ item.createBy }}</div>
                            <div style="height: 10px"></div>
                            <div>保修原因：</div>
                            <div>{{ item.repairCause }}</div>
                        </div>
                        <div style="height: 10px"></div>
                    </div>
                    <div style="height: 20px"></div>
                </view>
            </view>
        </div>
        <div class="container" v-if="service==2">
            <div style="height:10px"></div>
            <div class="card" style="padding: 10px 0 10px 0;">
                <div style="margin-left: 2.5%;">设备名称：{{ info.deviceName }}</div>
                <div style="height: 10rpx;"></div>
                <u-line color="#83AF92"></u-line>
                <div style="height: 10rpx;"></div>
                <div style="margin-left: 2.5%;">设备型号：{{ info.deviceModel }}</div>
                <div style="margin-left: 2.5%;">购买时间：{{ info.purchaseDate }}</div>
                <div style="height: 10rpx;"></div>
                <u-line color="#83AF92"></u-line>
                <div style="height: 10rpx;"></div>
                <div style="margin-left: 2.5%;">
                    <div>报修原因</div>
                    <div>
                        <textarea v-model="repairCause" placeholder="输入报修原因"  name="" id=""></textarea>
                    </div>
                </div>
                <div style="height: 10rpx;"></div>
                <div class="btns" @click="submit">
                    提交保修
                </div>
            </div>
        </div>
    </view>
</template>
<script>
import { getDeviceRepair,repairErrAdd } from '../api/api';
export default {
    data() {
        return {
            navIndex: 0,
            list: [],
            currentPage: '',
            role: '',
            service:1,
            info:{},
            repairCause:''
        };
    },
    methods: {
        submit(){
            if(this.repairCause==''){
                uni.showToast({
                        title: '输入完整后提交',
                        duration: 2000,
                        icon:'none'
                    });
            }else{
                repairErrAdd({
                deviceId:this.info.id,
                deviceName:this.info.deviceName,
                deviceModel:this.info.deviceModel,
                repairCause:this.repairCause,
                createBy:uni.getStorageSync('userInfo').nickName,
                createById:uni.getStorageSync('userInfo').userId,
            }).then(res=>{
                console.log(res.data);
                if(res.data.code==200){
                    uni.showToast({
                        title: res.data.msg,
                        duration: 2000
                    });
                    setTimeout(()=>{
                        this.repairCause = '';
                        uni.navigateBack({
                             delta: 1
                        });
                    },1000)
                }else{
                    uni.showToast({
                        title: res.data.msg,
                        duration: 2000,
                        icon:'none'
                    });
                }
            })
            }
            
        },
        checkIndex(index) {
            this.navIndex = index;
            console.log(index, 'index');
        },
        taskDetail(item) {
            uni.setStorageSync('driverTaskDetail', item)
            uni.navigateTo({ url: '/pagesDriver/system/questDetail' })
        },
        wxObj(id){
            getDeviceRepair(id).then(res=>{
                console.log(res.data);
                this.list = res.data.data;
            })  
        }
    },
    onLoad(options) { 
        if(options.flag=='jl'){
            this.service = 1;
        }else{
            this.service = 2;
        }
    },
    onShow() {
        this.role = uni.getStorageSync('userInfo').remark;
        this.info = uni.getStorageSync('deviceDetail');
        this.wxObj(this.info.id);
        var pages = getCurrentPages();
        let currentPageRoute = pages[pages.length - 1].route;
        // 根据当前页面路径设置currentPage
        this.currentPage = currentPageRoute;
        console.log(this.currentPage);
    },
};
</script>
<style lang="scss">
.container {
    height: 100vh;
    width: 100vw;
    background: #e3ede2;
    color: #1a512c;
    overflow-y: scroll;
}

.head-nav {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.activite {
    border-bottom: 2px solid #1a512c;
}

.card {
    width: 95%;
    margin-left: 2.5%;
    margin-top: 10px;
    border-radius: 10px;
    background: #b9e2c7;

    .card-top {
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 90%;
        margin-left: 5%;
    }
}

.items {
    display: flex;
    align-items: center;
    width: 90%;
    margin-left: 5%;
    justify-content: space-between;
    font-size: 14px;
}
.btns{
    background: #0d9b45;
    color: #fff;
    width:90%;
    margin-left: 5%;
    height:30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
</style>